<template>
  <div class="container new">
    <div class="container-top">
      <div class="top-name">售后详情</div>
    </div>
    <div class="main">
      <div class="table-content1">
       <div class="content-item">
          <div class="table-list">原订单号：{{detail.orderCode|| '暂无信息' }}</div>
          <div class="table-list">售后单号：{{detail.refundOrderCode|| '暂无信息' }}</div>
          <div class="table-list">申请时间：{{detail.gmtCreated|| '暂无信息' }}</div>
       </div>
       <div class="content-item">
          <div class="table-list">售后状态：{{refundStatusList.filter( item => {return item.value == detail.refundStatus}).length ? refundStatusList.filter( item => {return item.value == detail.refundStatus})[0].label : '暂无信息'}}</div>
          <div class="table-list">售后类型：{{refundTypeList.filter( item => {return item.value == detail.refundType}).length ? refundTypeList.filter( item => {return item.value == detail.refundType})[0].label : '暂无信息'}}</div>
          <div class="table-list">售后原因：{{detail.reason }}</div>
       </div>
      </div>
      <div class="title-desc">售后详细信息</div>
      <div class="group-wrap">
        <div class="group-item">
          <div class="group-title">售后信息</div>
          <div class="group-table">
            <div class="table-m">
              <div class="m-name">售后状态：</div>
              <div class="m-value">{{refundStatusList.filter( item => {return item.value == detail.refundStatus}).length ? refundStatusList.filter( item => {return item.value == detail.refundStatus})[0].label : '暂无信息'}}</div>
            </div>
            <div class="table-m">
              <div class="m-name">售后类型：</div>
              <div class="m-value">{{refundTypeList.filter( item => {return item.value == detail.refundType}).length ? refundTypeList.filter( item => {return item.value == detail.refundType})[0].label : '暂无信息'}}</div>
            </div>
            <div class="table-m">
              <div class="m-name">售后原因：</div>
              <div class="m-value">{{detail.reason || '暂无信息'}}</div>
            </div>
             <div class="table-m  pic">
              <div class="m-name">售后图片：</div>
              <div class="m-value">
                <ul  style="width:400px" class="flex-box-container">
                  <li @click="codeShow(item.fileUrl)"
                    v-for="(item, index) in detail.imageList" :key="index"
                      :style="{backgroundImage: 'url('+item.fileUrl+')'}"
                      style="cursor:pointer;width: 100px;height: 100px;background-size: cover;margin-right: 20px;"
                  >
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="group-item">
          <div class="group-title"></div>
          <div class="group-table">
            <div class="table-m">
              <div class="m-name">用户昵称：</div>
              <div class="m-value">{{detail.userName || '暂无信息'}}</div>
            </div>
            <div class="table-m">
              <div class="m-name">手机号：</div>
              <div class="m-value">{{detail.mobile || '暂无信息'}}</div>
            </div>
             <div class="table-m">
              <div class="m-name">备注：</div>
              <div class="m-value">{{detail.orderCode || '暂无信息'}}</div>
            </div>
            <div v-if="detail.refundType == 'REFUND_GOODS'" class="table-m">
              <div class="m-name">物流公司：</div>
              <div class="m-value">{{detail.logisticsCompany || '暂无信息'}}</div>
            </div>
            <div v-if="detail.refundType == 'REFUND_GOODS'" class="table-m">
              <div class="m-name">物流单号：</div>
              <div class="m-value">{{detail.shipmentNumber || '暂无信息'}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="title-desc">售后商品</div>
          <el-table
            v-if="detail.refundOrderType != 'RMB_ORDINARY'"
            class="table-group"
            :data="detail.productOrderDTO.orderItems"
            :border='true'>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="productCode" label="商品ID"></el-table-column>
            <el-table-column prop="productTitle" label="商品名称"></el-table-column>
            <el-table-column prop="modelName" label="规格">
              <template slot-scope="scope">{{scope.row && scope.row.modelName ? scope.row.modelName : ''}};{{scope.row && scope.row.modelSize ? scope.row.modelSize : ''}}</template>
            </el-table-column>
            <el-table-column prop="modelSalePrice" label="单价（元）"></el-table-column>
            <el-table-column prop="count" label="申请售后数量"></el-table-column>
            <el-table-column prop="totalPrice" label="退款金额（元）">
              <template slot-scope="scope">
                <div>{{detail.refundPrice}}</div>
                <div>（含运费{{detail.freightPrice}}）</div>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            v-if="detail.refundOrderType == 'RMB_ORDINARY'"
            class="table-group"
            :data="ordinaryOrderDTO"
            :border='true'>
            <el-table-column prop="productCode" label="商品ID"></el-table-column>
            <el-table-column prop="productTitle" label="商品名称"></el-table-column>
            <el-table-column prop="modelName" label="规格">
              <template slot-scope="scope">{{scope.row && scope.row.modelName ? scope.row.modelName : ''}};{{scope.row && scope.row.modelSize ? scope.row.modelSize : ''}}</template>
            </el-table-column>
            <el-table-column prop="costPrice" label="单价（元）"></el-table-column>
            <el-table-column prop="count" label="申请售后数量"></el-table-column>
            <el-table-column prop="price" label="退款金额（元）">
              <template slot-scope="scope">
                <div>{{scope.row.price}}</div>
                <div>（含运费{{scope.row.fright}}）</div>
              </template>
            </el-table-column>
          </el-table>
      <div class="btns">
        <span v-if="detail.refundStatus=='WAIT_AUDIT'">
            <el-button type="primary"  @click="handleAuditPass">审核通过</el-button>
            <el-button type="primary" @click="handleAuditNoPass">审核不通过</el-button>
        </span>
        <span v-if="detail.refundStatus=='IN_PROCESS'&&detail.refundOrderType == 'RMB_ORDINARY'">
            <el-button type="primary"  @click="handleAudit">确认退款</el-button>
        </span>
        <el-button v-if="detail.refundType == 'REFUND_GOODS'" type="primary"  @click="getLogD">查看物流</el-button>
        <el-button type="primary" @click="back()">返回</el-button>
      </div>
      <el-dialog title="备注" :visible.sync="dialogVisible1" width="30%">
        <el-input v-model="message" type="textarea" :rows="4"></el-input>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="物流详情" :visible.sync="addressState" width="50%">
      <el-timeline v-if="!tipState">
        <el-timeline-item 
          v-for="(item, index) in listInfo.list"
          :key="index"
          :timestamp="item.datetime">
          {{item.remark}}
        </el-timeline-item>
      </el-timeline>
      <div style="text-align:center" v-else>暂无物流信息</div>
    </el-dialog>
      <el-dialog
        :title="auditTitle"
        :visible.sync="dialogVisible"
        width="40%">
        <el-form :model="params" :rules="rules" ref="information" label-width="80px" class="">
          <el-form-item label="理由" prop="reason">
            <el-input type="textarea" :rows="4" v-model="params.reason" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleAuditPass1('information')" v-if="auditTitle == '审核通过'">保 存</el-button>
            <el-button type="primary" @click="handleAuditNoPass1('information')" v-else-if="auditTitle == '审核不通过'">保 存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
   <el-dialog
        title="查看图片"
        :visible.sync="codeState"
        width="40%">
        <img style="width:100%" :src="codeImg" alt="">
        <span slot="footer" class="dialog-footer">
            <el-button type="cancel" @click="codeState = false">关闭</el-button>
        </span>
    </el-dialog>
  </div>


</template>

<script>
  let CONSTANT = require('../../constant/constant.js');
  let common = require("../../common.js");
  import $ from 'jquery'
  export default {
    data() {
      return {
        detail: {},
        dialogVisible: false,
        dialogVisible1: false,
        message: "",
        auditTitle: "",
        params: {
          reason: "",
          refundCode: "",
          refundStatus: "",
        },
        ordinaryOrderDTO:[],
        rules: {
          reason: [{ required: true, message: "请输入理由", trigger: "blur" }],
        },
        codeState:false,
        codeImg:'',
        refundStatusList: [{
          label: "默认",
          value: "NORMAL"
        },{
          label: "待审核",
          value: "WAIT_AUDIT"
        },{
          label: "处理中",
          value: "IN_PROCESS"
        },{
          label: "售后成功",
          value: "SUCCESS"
        },{
          label: "售后失败",
          value: "FAILURE"
        }],
        refundTypeList: [{
          label: "默认",
          value: "NORMAL"
        },{
          label: "仅退款",
          value: "ONLYREFUND"
        },{
          label: "退货",
          value: "REFUND_GOODS"
        },{
          label: "换货",
          value: "EXCHANGE_GOODS"
        }],
        listInfo:'',
        tipState:false,
        addressState:false
      };
    },
    components:{
    },
    mounted() {
      this.getDetail()
    },
    methods: {
      codeShow(pic){
        this.codeState = true
        this.codeImg = pic
      },
      getDetail(){
        let url = CONSTANT.URL.LIST.REFUNDBYID
        common.get(url, this.$route.query.id, res => {
          if (res.code == 200) {
            this.detail = res.data.bussData
            if(this.detail.refundOrderType == 'RMB_ORDINARY'){
              this.ordinaryOrderDTO.push(this.detail.ordinaryOrderDTO)
            }
          }
        })
      },
      handleAudit(item) {
        this.$confirm(`是否确认退款给用户?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let url = CONSTANT.URL.LIST.REFUNDCONFIRM1;
            common.get(url, this.detail.id, res => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "退款成功!"
                });
                this.getDetail();
              } else {
                this.$message({
                  type: "warning",
                  message: res.msg.errMsg
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      },
      getLogD(){
        this.addressState = true
        let url = CONSTANT.URL.LIST.expQueryParam
        common.post(url, {  
          com:this.detail.logisticsCompany,
          no:this.detail.shipmentNumber
        }, res => {
          if (res.code == 200) {
            let data = res.data.bussData
            this.listInfo = data?JSON.parse(data):{}
            if(!this.listInfo||!this.listInfo.list){
              this.tipState = true
            }else{
              this.tipState = false
            }
          }
        })
      },
      handleAuditPass() {
        this.params.refundCode = this.detail.refundOrderCode
        this.params.refundStatus = "SUCCESS"
        this.dialogVisible = true
        this.auditTitle = "审核通过"
      },
      handleAuditPass1(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.loading = true;
            let url = CONSTANT.URL.LIST.REFUNDAUDIT
            common.post(url, this.params, res => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "保存成功"
                })
                this.getList()
                this.dialogVisible = false
              }
            })
          } else {
            return false;
          }
        });

      },
      handleAuditNoPass() {
        this.params.refundCode = this.detail.refundOrderCode
        this.params.refundStatus = "FAILURE"
        this.dialogVisible = true
        this.auditTitle = "审核通过"
      },
      handleAuditNoPass1(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.loading = true;
            let url = CONSTANT.URL.RANK.add
            common.post(url, this.params, res => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "保存成功"
                })
                this.getList()
                this.dialogVisible = false
              }
            })
          } else {
            return false;
          }
        });
      },
      handleConfirmRefund() {
        this.$confirm("确定退款给用户?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let url = CONSTANT.URL.LIST.REFUNDCONFIRM;
            common.get(url, this.detail.id, res => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "退款成功!"
                });
                this.getDetail()
              } else {
                this.$message({
                  type: "warning",
                  message: res.msg
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      editorInfo(val){
        this.information.detail = val;
      },
      resetForm(formName) {this.$refs[formName].resetFields();},
      back(){ this.$router.back()
      },
    }
  }
</script>
<style lang="scss">

  
</style>
